<template>
    <div class="modal">
        <div class="flex w-full h-full justify-center items-center flex-col">
            <h1 class="text-2xl mb-5">
                请设置更新时间
                <p class="text-base text-center">单位（秒）</p>
            </h1>

            <input v-model.number="num" min="0" max="100" type="number" class="inline-block input" />
            <div>
                <a-button class="mr-2" @click="ok">确定</a-button>
                <a-button @click="cancel">取消</a-button>
            </div>
        </div>
    </div>
</template>
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
let num = ref(20)
function ok() {
    router.push({
        path: '/',
        // query: {
        //     num: num.value
        // }
    })
    window.localStorage.setItem('time', num.value)
}
function cancel() {
    num.value = 20
    router.push({
        path: '/',
        // query: {
        //     num: 20
        // }
    })
    window.localStorage.setItem('time', num.value)
}

onMounted(() => {
    let timeStorage = window.localStorage.getItem('time')
    if (timeStorage) {
        num.value = Number(timeStorage)
    } else {
        num.value = 20
    }
})

</script>



<style lang="less" scoped>
.modal {
    @apply border;
    width: 500px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.input {
    width: 340px;
    margin-bottom: 20px;
    padding: 5px;
    color: black;
}
</style>